<template>
  <div>
    <a-card title="选择表单" size="small">
      <ZgInput v-model="searchStr" placeholder="输入名称或编码" class="mb10" @enter="search"></ZgInput>
      <div
        class="scroll pt0 pl10 pr10"
        :style="{margin:'0 -10px -10px',height:`${winHeight-320}px`}">
        <div
          class="form"
          :class="{current:obj.id===currFormId}"
          v-for="obj in list"
          :key="`form${obj.id}`"
          @click="onClickForm(obj)">
          <div>名称：{{ obj.name }}</div>
          <div>编码：{{ obj.code }}</div>
        </div>
      </div>
      <a-pagination
        size="small"
        class="mt20"
        v-model="page"
        :total="total"
        :pageSize="pageSize"
        @change="onPageChange"></a-pagination>
    </a-card>
  </div>
</template>
<script>
export default {
  data () {
    return {
      currFormId: '',
      page: 1,
      pageSize: 10,
      total: 0,
      searchStr: '',
      list: []
    }
  },
  mounted () {
    this.search()
  },
  methods: {
    search () {
      this.$http.get('/zg-autoform/form/page', {
        page: this.page,
        pageSize: this.pageSize,
        searchStr: this.searchStr
      }, data => {
        this.total = parseInt(data.total)
        this.list = data.records
        if (data.records.length > 0) {
          this.onClickForm(data.records[0])
        }
      })
    },
    onPageChange (p) {
      this.page = p.page
      this.pageSize = p.pageSize
      this.search()
    },
    onClickForm (obj) {
      this.currFormId = obj.id
      this.$emit('change', obj.id)
    }
  }
}
</script>

<style lang="scss" scoped>
.form{
  margin-bottom:10px;
  border:dashed 1px #1890ff;
  border-radius:3px;
  padding:10px;
  cursor:pointer;
  &:hover{
    background:#1890ff;
    color:#fff;
  }
  &.current{
    background:#1890ff;
    color:#fff;
  }
}
</style>
